<template>
  <div>
    <el-card shadow="always">
      <div slot="header">
        <span style="font-size: 20px; font-weight: bold;" class="center">标签云</span>
      </div>
      <el-tag
        v-for="label in labels"
        :key="label.labelName"
        effect="dark" style="margin: 5px" @click.native="onSubmit(label.labelName)">
        {{ label.labelName }}
      </el-tag>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "LabelCloud",
  data(){
    return{
      labels:[],
    }
  },
  methods: {
    onSubmit(name){
      this.$router.push({path:'/blog/search',query:{keyword:name, type:'label'}});
    },
    getHotLabel(){
      this.axios.post("/blog/queryHotBlogLabel").then((response)=>{
        for (let i = 0; i < response.data.length; i++) {
          let label={
            lid:'',
            labelName:'',
            createTime:'',
          };
          label.lid=response.data[i].lid;
          label.labelName=response.data[i].labelName;
          label.createTime=response.data[i].createTime;
          this.labels.push(label);
        }
      })
    }
  },
  mounted() {
    this.getHotLabel();
  }
}
</script>

<style scoped>
.center {
  display: block;
  text-align: center;
}
.el-tag{
  cursor: pointer;
}
</style>
